<template>
  <div class="container">
    <el-card class="box-card1">
      <div slot="header" class="title">全国疫情数据(含港澳台)</div>
      <div class="list-total">
        <div class="item cover_input">
          <h4>境外输入</h4>
          <div class="number">{{ total.input }}</div>
          <p class="added">
            较昨日
            <span>+{{ today.input }}</span>
          </p>
        </div>
        <div class="item cover_nosymptom">
          <h4>无症状感染者</h4>
          <div class="number">{{ extData.noSymptom }}</div>
          <p class="added">
            较昨日
            <span>+{{ extData.incrNoSymptom }}</span>
          </p>
        </div>
        <div class="item cover_today_confirm">
          <h4>现有确诊</h4>
          <div class="number">
            {{ total.confirm - total.dead - total.heal }}
          </div>
          <p class="added">
            较昨日
            <span>+{{ today.storeConfirm }}</span>
          </p>
        </div>
        <div class="item cover_confirm">
          <h4>累计确诊</h4>
          <div class="number">{{ total.confirm }}</div>
          <p class="added">
            较昨日
            <span>+{{ today.confirm }}</span>
          </p>
        </div>
        <div class="item cover_dead">
          <h4>累计死亡</h4>
          <div class="number">{{ total.dead }}</div>
          <p class="added">
            较昨日
            <span>+{{ today.dead }}</span>
          </p>
        </div>
        <div class="item cover_heal">
          <h4>累计治愈</h4>
          <div class="number">{{ total.heal }}</div>
          <p class="added">
            较昨日
            <span>+{{ today.heal }}</span>
          </p>
        </div>
      </div>
      <div class="cover_time">截至{{ lastUpdateTime }}</div>
    </el-card>
    <china-map></china-map>
    <line-chart></line-chart>
    <time-line></time-line>
  </div>
</template>

<script>
  import ChinaMap from './components/map.vue'
  import LineChart from './components/lineChart.vue'
  import TimeLine from './components/timeLine.vue'
  import { getOtherData } from '@/api/other'
  export default {
    name: 'Index',
    components: {
      ChinaMap,
      LineChart,
      TimeLine,
    },
    data() {
      return {
        total: {},
        today: {},
        extData: {},
        lastUpdateTime: '',
      }
    },
    created() {
      this.getInfo()
    },
    mounted() {},
    methods: {
      async getInfo() {
        // this.$axios
        //   .get('/wuhan/app/data/list-total')
        //   .then((res) => {
        //     this.today = res.data.data.chinaTotal.today
        //     this.total = res.data.data.chinaTotal.total
        //     this.extData = res.data.data.chinaTotal.extData
        //     this.lastUpdateTime = res.data.data.lastUpdateTime
        //   })
        //   .catch((err) => {
        //     console.error(err)
        //   })
        const { data } = await getOtherData(
          'https://c.m.163.com/ug/api/wuhan/app/data/list-total'
        )
        this.today = data.data.chinaTotal.today
        this.total = data.data.chinaTotal.total
        this.extData = data.data.chinaTotal.extData
        this.lastUpdateTime = data.data.lastUpdateTime
      },
    },
  }
</script>
<style lang="scss" scoped>
  .box-card1 {
    width: 440px;
    float: left;
    margin-left: 10px;
  }
  .list-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .title {
    color: #333;
    font-size: 24px;
  }
  .item {
    width: 120px;
    height: 100px;
    margin-bottom: 15px;
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
  }
  h4 {
    text-align: center;
    color: #333;
  }
  .number {
    text-align: center;
    color: #ffa352;
    font-weight: 700;
    font-size: 26px;
  }
  .added {
    text-align: center;
    color: #999;
  }
  .added span {
    color: #ffa352;
  }
  .cover_nosymptom .added span {
    color: #791618;
  }
  .cover_nosymptom .number {
    color: #791618;
  }
  .cover_today_confirm .number {
    color: #e44a3d;
  }
  .cover_today_confirm .added span {
    color: #e44a3d;
  }
  .cover_confirm .number {
    color: #a31d13;
  }
  .cover_confirm .added span {
    color: #a31d13;
  }
  .cover_dead .number {
    color: #333;
  }
  .cover_dead .added span {
    color: #333;
  }
  .cover_heal .number {
    color: #34aa70;
  }
  .cover_heal .added span {
    color: #34aa70;
  }
  .cover_time {
    color: #a9a9a9;
  }
</style>
